<template>
  <div id="homepapers">
    <el-card :body-style="{ padding: '20px' }" shadow="never">
      <div slot="header">问卷管理
        <el-button type="primary" size="mini" @click="add" icon="el-icon-plus">创建问卷</el-button>
      </div>
      <!-- card body -->
      <div style="margin: 20px 0px;">
        <el-input placeholder="请输入内容" class="input-with-select" v-model="fieldVal">
          <el-select v-model="field" slot="prepend" placeholder="请选择" style="width:100px;">
            <el-option label="标题" value="title"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <el-table :data="papers" v-loading="loading" :border="true">
         <el-table-column prop="ctime" label="创建时间" :formatter="formatCtime"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="users[0].username" label="创建人">
        </el-table-column>
        <el-table-column prop="classes[0].class_name" label="班级"></el-table-column>
        <el-table-column label="操作" width="300px">
          <div slot-scope="{row}">
            <el-button size="mini" type="primary" @click="edit(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(row.id)">删除</el-button>
            <el-button size="mini" type="success" @click="publish(row.id)">发布</el-button>
             <el-button size="mini" type="warning" @click="analysis(row.id)">分析</el-button>
          </div>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:20px"
        background
        layout="prev, pager, next,sizes"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="currentChange()"
        :page-sizes="[10,30]"
        @size-change="sizeChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import moment from "moment"
export default {

  data() {
    return {
      papers: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
      pageNum: 0,
      loading: false,
      field: "title",
      fieldVal: ""
    };
  },
  created() {
    this.getpapers();
  },
  methods: {
    analysis(id){
      this.$router.push({
        name:"analysis",
        params:{
          id
        }
      })

    },
    // 发布跳转
    publish(id){
      this.$router.push({
        name:'publish',
        params:{
          id
        }
      })
    },
    formatCtime:function(row){
      return moment(row.ctime).format("YYYY-MM-DD HH:mm:ss")
    },
    edit(id) {
      this.$router.push({
        name: "paperedit",
        params: {
          id
        }
      });
    },
    del(id) {
      this.$alert("确定删除吗？", "提示", {
        confirmButtonText: "确定"
      }).then(() => {
        this.axios
          .delete(`/papers/del/${id}`)
          .then(() => {
            this.$message.success('删除成功！')
            this.getpapers();

          }).catch(()=>{
            this.$message.error('删除失败！')
          })
         
      }).catch(()=>{});
    },
    add() {
      this.$router.push({
        name: "paperadd"
      });
    },
    search() {
      this.getpapers();
    },
    currentChange() {
      this.getpapers();
    },
    sizeChange(size) {
      console.log(size);
      this.pageSize = size;
      this.getpapers();
    },
    getpapers() {
      this.loading = true;
      this.axios
        .get("/papers", {
          params: {
            field: this.field,
            fieldVal: this.fieldVal,
            pageSize: this.pageSize,
            currentPage: this.currentPage
          }
        })
        .then(ret => {
          this.loading = false;
          let { error, data } = ret.data;
          this.papers = data.rows;
          console.log(data.rows)
          this.total = data.total;
          this.pageNum = Math.ceil(data.total / data.pageSize);
        })
        .catch(() => {});
    }
  }
};
</script>

<style>
</style>
